<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#add").click(function(){
                $("#d1").data("id","2");
                $("#d1").data("username","admin");
                $("#d1").data("age","18");
                $("#d2").data("age","19");
            });
            $("#find").click(function(){
                console.log("id:"+$("#d1").data("id"));
                console.log("username:"+$("#d1").data("username"));
                console.log("age:"+$("#d1").data("age"));
                console.log("age:"+$("#d2").data("age"));
            });
            $("#modify").click(function(){
                // 在绑定数据的时候,如果绑定的数据的key相同
                // 则覆盖原有数据
                $("#d1").data("id","1");
                $("#d1").data("username","alice");
                $("#d1").data("age","20");
            });
            $("#delete").click(function(){
                $("#d1").removeData("id");
            });
        });
    </script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<button id="add">绑定数据</button>
<button id="find">获取数据</button>
<button id="modify">修改数据</button>
<button id="delete">删除数据</button>
</body>
</html>